<template>
  <div class="app-container translate">
    <div class="content">
      <div class="tabs">
        <div v-for="tab in tabs" :key="tab.value" :class="{active: tab.value==activeTab}" class="tab" @click="tabClick(tab.value)">
          <div class="t1">{{ tab.label }}</div>
          <div class="t2">{{ tab.remark }}</div>
        </div>
      </div>

      <div class="txtBox">
        <div class="header">
          <div class="fromLang" @click="selectLang(1)">
            {{ $t(`lang.${fromLang.label}`) }}
            <el-icon class="el-icon--right"><arrow-down /></el-icon>
          </div>
          <div class="switchLang" @click="switchLang">
            <el-icon><Switch /></el-icon>
          </div>
          <div class="toLang" @click="selectLang(2)">
            {{ $t(`lang.${toLang.label}`) }}
            <el-icon class="el-icon--right"><arrow-down /></el-icon>
          </div>
          <div class="flex1"></div>

          <div>
            <el-switch v-model="showGlossary" size="large" inline-prompt :active-text="$t('translate.glossary')" :inactive-text="$t('translate.glossary')" />
          </div>

          
        </div>
        <div class="middle">
          <!-- 语言下拉框 -->
          <div v-if="showSelectLang" class="langList">
            <div class="top">
              <span class="tip">{{ $t('translate.selectLangP') }}</span>
              <el-icon @click="showSelectLang=false"><Close /></el-icon>
            </div>
            <div v-for="lang in langList" :key="lang.name" class="langItem" @click="langClick(lang)">{{ $t(`lang.${lang.label}`) }}</div>
          </div>
          <!-- 文本输入 -->
          <div v-if="activeTab==1" class="input">
            <div><el-icon @click="clearInput"><Close /></el-icon></div>
            <el-input v-model="inputText" type="textarea" :rows="6" maxlength="5000" show-word-limit :placeholder="$t('translate.inputTxt')" />
          </div>

          <div v-if="activeTab==2" class="fileSelect">
            <p>{{ $t('translate.selectFileP') }}</p>
            <el-upload
              action="/"
              :accept="'application/msword,.docx,.txt,.pdf,.pptx'"
              :before-upload="beforeUpload"
            >
              <el-button type="primary">{{ $t('translate.selectFile') }}</el-button>
              <template #tip>
                <div class="el-upload__tip">
                  {{ $t('translate.fileTip') }}
                </div>
              </template>
            </el-upload>
          </div>

          <div v-if="activeTab==3" class="imgSelect">
            <p>{{ $t('translate.selectImgP') }}</p>
            <el-upload
              action="/"
              :accept="'image/jpeg,image/png'"
              :before-upload="beforeUpload"
            >
              <el-button type="primary">{{ $t('translate.selectImg') }}</el-button>
              <template #tip>
                <div class="el-upload__tip">
                  {{ $t('translate.imgTip') }}
                </div>
              </template>
            </el-upload>
          </div>

        </div>
        <div class="footer">
          <div class="icon">
            <svg-icon icon-class="microphone" @click=" recording"/>
          </div>
          <div class="icon">
            <svg-icon icon-class="horn" @click="playSound"/>
          </div>
        </div>
      </div>

      <div v-for="(item, i) in resultList" :key="i" class="txtBox">
        <div class="header">
          <div class="title">google翻译</div>
          <div class="flex1"></div>
          <div class="icon">
            <svg-icon icon-class="copy" @click="hanpleCopy(item)"/>
          </div>
          <div class="icon">
            <svg-icon icon-class="horn" @click="playSound(item)"/>
          </div>
          <div class="icon"></div>
          <div class="icon">
            <svg-icon icon-class="like" @click="hanpleLike(item)"/>
          </div>
          <div class="icon">
            <svg-icon icon-class="unlike" @click="hanpleUnlike(item)"/>
          </div>
          <div class="icon">
            <svg-icon icon-class="share" @click="hanpleShare(item)"/>
          </div>

          
        </div>
        <div class="middle">
          

        </div>

      </div>

      <!-- 翻译服务来源 -->
      <div class="sourceList" :class="{showTop: !showRight}">
        <div v-for="item in sourceList" :key="item.value" class="sourceItem" :class="{active:item.checked}" @click="sourceCheck(item)">
          <div class="sourceInner">
            <div class="dot"></div>
            <div class="text">{{ item.label }}</div>
          </div>
        </div>
      </div>

      <!-- 历史记录 -->
      <div v-if="showRight" class="historyList">
        <div class="title">
          <div class="t1">{{ $t('translate.logs') }}</div>
          <div class="t2">{{ $t('translate.more') }}</div>
        </div>
        <div v-for="i in historyList.length > 3 ? 3 : historyList.length" :key="i" class="historyItem">
          <div class="txt"> 中国常驻联合国副代表戴平表示，乌克兰危机的发展一再证明，冲突或对抗都不会取得胜利</div>
          <div class="footer">
            <div class="time">{{ new Date().Format('yyyy-MM-dd hh:mm') }}</div>
            <div class="close">
              <el-icon @click="historyList.splice(i-1,1)"><Close /></el-icon>
            </div>
          </div>
        </div>
      </div>


    </div>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
import { ArrowDown, Switch, Close } from '@element-plus/icons-vue'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()


const vw = document.documentElement.clientWidth
console.log('vw', vw)
const showRight = ref(vw > 1580)

const langList = reactive([
  { name: '中文', label: 'zh' },
  { name: '阿拉伯语', label: 'ar' },
  { name: '英文', label: 'en' },
  { name: '法语', label: 'fr' },
  { name: '德语', label: 'de' },
  { name: '意大利语', label: 'it' },
  { name: '日语', label: 'ja' },
  { name: '韩语', label: 'ko' },
  { name: '葡萄牙语', label: 'pt' },
  { name: '俄语', label: 'ru' },
  { name: '西班牙语', label: 'es' },
  { name: '荷兰语', label: 'nl' },
  { name: '波兰语', label: 'pl' },
  { name: '瑞典语', label: 'sv' },
  { name: '土耳其语', label: 'tr' },
  { name: '希腊语', label: 'el' },
  { name: '匈牙利语', label: 'hu' },
  { name: '芬兰语', label: 'fi' },
  { name: '捷克语', label: 'cs' },
  { name: '丹麦语', label: 'da' },
  { name: '罗马尼亚语', label: 'ro' },
  { name: '斯洛文尼亚语', label: 'sl' },
  { name: '斯洛伐克语', label: 'sk' },
  { name: '保加利亚语', label: 'bg' },
  { name: '爱沙尼亚语', label: 'et' },
  { name: '克罗地亚语', label: 'hr' },
  { name: '立陶宛语', label: 'lt' },
  { name: '拉脱维亚语', label: 'lv' },
  { name: '乌克兰语', label: 'uk' },
  { name: '印尼语', label: 'id' },
  { name: '越南语', label: 'vi' },
  { name: '泰语', label: 'th' },
  { name: '马来西亚语', label: 'ms' },
  { name: '希伯来语', label: 'he' },
  { name: '波斯语', label: 'fa' },
  { name: '印地语', label: 'hi' },
  { name: '乌尔都语', label: 'ur' },
])

// 语言选择 切换
const fromLang = ref({ name: '阿拉伯语', label: 'ar' })
const toLang = ref({ name: '中文', label: 'zh' })

const switchLang = () => {
  const temp = fromLang.value
  fromLang.value = toLang.value
  toLang.value = temp
}
const showSelectLang = ref(false)
const selectLangType = ref(1)
const selectLang = (type) => {
  selectLangType.value = type
  showSelectLang.value = true
}
const langClick = (lang) => {
  if (selectLangType.value === 1) {
    fromLang.value = lang
  } else {
    toLang.value = lang
  }
  showSelectLang.value = false
}
const showGlossary = ref(false)

// 翻译Tab
const tabs = reactive([
  { label: t('translate.tab1'), value: 1, remark: t('translate.tabR1') },
  { label: t('translate.tab2'), value: 2, remark: 'WORD、TXT、PDF、PPTX' },
  { label: t('translate.tab3'), value: 3, remark: 'JPG、PNG' }
])
const activeTab = ref(1)
const tabClick = (value) => {
  activeTab.value = value
}

const inputText = ref('')
const clearInput = () => {
  inputText.value = ''
}

// 录音
const recording = () => {
  console.log('recording')
}
// 播放声音
const playSound = () => {
  console.log('playSound')
}

const resultList = ref([]) // 翻译结果

const hanpleCopy = (item) => {
  console.log('hanpleCopy', item)
}
const hanpleLike = (item) => {
  console.log('hanpleLike', item)
}
const hanpleUnlike = (item) => {
  console.log('hanpleUnlike', item)
}
const hanpleShare = (item) => {
  console.log('hanpleShare', item)
}

// 文件上传
const beforeUpload = (file) => {
  console.log('beforeUpload', file)
  return false
}

// 翻译来源
const sourceList = reactive([
  { label: 'Baidu', value: 'baidu', checked: true },
  { label: 'Google', value: 'google', checked: true },
  { label: 'Chat', value: 'chat', checked: true },
  { label: 'DeepL', value: 'deepl', checked: true },
  { label: 'Micsoft', value: 'micsoft', checked: true }
])
const sourceCheck = (item) => {
  item.checked = !item.checked
}

// 历史记录
const historyList = reactive([{}, {}])
</script>
<style lang="scss">
.translate {
  .content {
    position: relative;
  }
  .tabs {
    display: flex;
    .tab {
      text-align: center;
      padding: 12px;
      cursor: pointer;
      width: 180px;
      background: #fff;
      margin-right: 10px;
      border-radius: 6px;
      .t1 {
        font-size: 20px;
        font-weight: bold;
        line-height: 1.5;
      }
      .t2 {
        font-size: 12px;
        color: #666;
      }
      &.active {
        background-color: rgba(66,133,244,.12);
      }
    }
  }

  .txtBox {
    width: 100%;
    background: #fff;
    border-radius: 6px;
    margin-top: 20px;
    .header {
      padding: 8px 20px;
      border-bottom: 1px solid #f0f0f0;
      display: flex;
      align-items: center;
      cursor: pointer;
      position: relative;
      .flex1 {
        flex: 1;
      }

      .switchLang {
        padding: 0 20px;
      }
      .fromLang, .toLang {
        width: 120px;
        text-align: center;
      }
    }
    .langList {
      position: absolute;
      top: 0;
      left: 0;
      width: 500px;
      background: #fff;
      padding: 16px;
      z-index: 99;
      border-width: 0px 1px 1px 1px;
      border-style: solid;
      border-color: rgba(201, 201, 201, 1);
      border-radius: 6px;

      .langItem {
        display: inline-block;
        width: 33%;
        text-align: center;
        cursor: pointer;
        line-height: 2;
        &:hover {
          color: rgba(66,133,244, 1);
        }
      }
      .top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
        .tip {
          color: #666;
          margin-left: 60px;
        }
      }
    }
    .middle {
      padding: 20px;
      border-bottom: 1px solid #f0f0f0;
      position: relative;
    }
    .footer {
      padding: 10px 20px;
      display: flex;
      align-items: center;
      cursor: pointer;
      position: relative;
      .flex1 {
        flex: 1;
      }
      
    }
    .icon {
      padding: 0 20px;
    }

    .fileSelect, .imgSelect {
      text-align: center;
    }
  }

  .sourceList {
    position: absolute;
    width: 280px;
    top: 85px;
    right: -280px;
    &.showTop {
      top: 0;
      right: 50px;
      width: 330px;
      font-size: 14px;
      .sourceItem {
        width: 100px;
        margin: 3px 5px;
        padding: 0 10px;
        .sourceInner {
          height: 30px;
        }
      }
    }
    .sourceItem {
      background: #fff;
      display: inline-block;
      width: 120px;
      margin: 5px 10px;
      padding: 0 20px;
      border-radius: 18px;
      cursor: pointer;
      .sourceInner {
        display: flex;
        align-items: center;
        // justify-content: space-between;
        height: 36px;
      }
      .dot {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: rgba(229, 229, 229, 1);
        margin-right: 10px;
      }
      &.active {
        .dot {
          background: rgba(67, 207, 124, 1);
        }
      }
    }
  }

  .historyList {
    position: absolute;
    width: 270px;
    top: 250px;
    right: -280px;
    background: #fff;
    border-radius: 6px;
    padding: 10px 0 20px 0;
    .title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 20px;
      .t1 {
        font-size: 16px;
        font-weight: bold;
      }
      .t2 {
        color: #666;
      }
    }
    .historyItem {
      padding: 10px 20px;
      box-shadow: 0px 2px 12px  rgba(0, 0, 0, 0.1);
      background: #fff;
      border-radius: 6px;
      width: 240px;
      margin: 5px auto;
      .txt {
        color: #666;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        margin-bottom: 8px;
      }
      .footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .time {
          color: #666;
        }
      }
    }
  }
  
}
</style>
